<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
</head>
<style>
    body .demo-class .layui-layer-title {
        background: #c00;
        color: #fff;
        border: none;
    }

    body .demo-class .layui-layer-btn {
        border-top: 1px solid #E9E7E7
    }

    body .demo-class .layui-layer-btn a {
        background: #5daf34;
    }

    body .demo-class .layui-layer-btn .layui-layer-btn1 {
        background: #999;
    }
</style>
<script src="../../static/global.js"></script>

<link rel="stylesheet" href="../../static/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../../static/layui_ext/dtree/font/dtreefont.css">



<body>
<div style="margin-top: 20px">
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">品牌名：</label>
            <div class="layui-input-inline">
                <input type="text" name="brand_name" id="brand_name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn" id="brand_souso" lay-submit="" lay-filter="demo1">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>

<!--新增品牌页面-->
<div id="brand_add_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="brand_add_form" lay-filter="brand_add_form">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入品牌名" class="layui-input">
            </div>
        </div>
        <div class="layui-upload" style="margin-left:10px; margin-right:3px">
            <div class="layui-upload-list">
                <img class="layui-upload-img layui-hide brand_logo_imgs" style="height: 80px;width: 80px;"
                     id="brand_logo_imgs">
                <p id="demoText"></p>
            </div>
            <button type="button" class="layui-btn layui-btn-normal testList" id="testList">上传图片</button>
            <button type="button" class="layui-btn testListAction" id="testListAction">开始上传</button>
            <input class="layui-input layui-hide"   type="text" id="brand_logo" name="logo">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">介绍</label>
            <div class="layui-input-inline">
                <input type="text" name="descript" lay-verify="required" placeholder="请输入介绍" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" id="show_status_add" name="show_status" lay-skin="switch"
                       lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">检索字母</label>
            <div class="layui-input-inline">
                <input type="text" name="first_letter" lay-verify="required" placeholder="请输入检索字母" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="number" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="brand_add" lay-filter="brand_add">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>

<!--修改品牌页面-->
<div id="brand_up_div" style="margin-left: 90px;margin-top: 30px;display: none">
    <form class="layui-form layui-form-pane" id="brand_up_form" lay-filter="brand_up_form">
        <div class="layui-form-item">
            <label class="layui-form-label">品牌名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入品牌名" class="layui-input">
                <input type="text" style="display: none" name="brand_id" class="layui-input">
            </div>
        </div>
        <div class="layui-upload" style="margin-left:10px; margin-right:3px">
            <div class="layui-upload-list">
                <img class="layui-upload-img brand_logo_imgs" style="height: 80px;width: 80px;" id="up_brand_logo_imgs">
                <p id="up_demoText"></p>
            </div>
            <button type="button" class="layui-btn layui-btn-normal testList" id="up_testList">修改图片</button>
            <button type="button" class="layui-btn testListAction" id="up_testListAction">开始上传</button>
            <input class="layui-input layui-hide" type="text" id="up_brand_logo" name="logo">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">介绍</label>
            <div class="layui-input-inline">
                <input type="text" name="descript" lay-verify="required" placeholder="请输入介绍" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" name="show_status" lay-skin="switch" lay-filter="switchTest"
                       lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">检索字母</label>
            <div class="layui-input-inline">
                <input type="text" name="first_letter" lay-verify="required" placeholder="请输入检索字母" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="number" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="brand_up" lay-filter="brand_up">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>


<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
    </div>
</script>
<!--品牌表格显示渲染-->
<table class="layui-hide" id="demo" lay-filter="test"></table>
<!--侧边栏显示信息-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="brand_category">关联分类</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--表格switch按钮-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="show_status" id="switch_show_status" value="{{d.brand_id}}" lay-skin="switch"
           lay-text="ON|OFF" lay-filter="switch_show_status" {{ d.show_status== 1 ? 'checked' : '' }}>
</script>
<!--显示图片信息-->
<script type="text/html" id="imgTpl">
    <img style="display: inline-block; width: 100%; height: 100%;" onclick="showBigImage(this)" src={{ d.logo }}>
</script>


<!--品牌分类的头部工具栏-->
<script type="text/html" id="category_brand_tool">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" id="category_brand_add_tool" lay-event="category_brand_add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="category_brand_delete">批量删除</button>
    </div>
</script>

<!--品牌分类的维护显示-->
<div style="display: none" id="brand_category_div">
    <div style="margin-top: 20px">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">查詢：</label>
                <div class="layui-input-inline">
                    <input type="text" id="category_brand_name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" id="category_brand_souso" lay-submit=""
                        lay-filter="category_brand_souso">搜索
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    </div>
    <table class="layui-hide" id="brand_category_table" lay-filter="brand_category_table"></table>
</div>

<!--品牌分类的维护添加功能-->
<div id="category_brand_add_div" style="display: none">
    <form class="layui-form layui-form-pane" id="category_brand_add_form" lay-filter="category_brand_add_form">
        <!--品牌的ID绑定-->
        <input type="text" style="display: none" name="brand_id" lay-verify="required" id="category_brand_add_brand_id" class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">请选者分类</label>
            <div class="layui-input-inline">
                <ul id="add_selTree1" class="dtree" data-id="0"></ul>
                <input type="text" name="catelog_id" lay-verify="required" id="add_tree" class="layui-input layui-hide">
            </div>
        </div>
        <!--品牌的名称绑定-->
        <input type="text" name="brand_name" id="category_brand_add_brand_name" class="layui-input layui-hide">
        <!--分类的名称绑定-->
        <input type="text" name="catelog_name" id="category_brand_add_cotelog_name" class="layui-input layui-hide">

        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="category_brand_add"
                    lay-filter="category_brand_add">添加
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>


<!--品牌分类的维护修改功能-->
<div id="category_brand_up_div" style="display: none">
    <form class="layui-form layui-form-pane" id="category_brand_up_form" lay-filter="category_brand_up_form">
        <!--修改需要传入的主键ID-->
        <input type="text" style="display: none" name="id" lay-verify="required" id="" class="layui-input">
        <!--品牌的ID绑定-->
        <input type="text" style="display: none" name="brand_id" lay-verify="required" id="category_brand_up_brand_id" class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">请选者分类</label>
            <div class="layui-input-inline">
                <ul id="up_selTree1" data-value="" class="dtree" data-id="0"></ul>
                <input type="text" name="catelog_id" lay-verify="required" id="category_brand_up_cotelog_id" class="layui-input layui-hide">
            </div>
        </div>
        <input type="text" id="category_brand_up_cotelog_name" name="catelog_name" class="layui-input layui-hide">

        <!--品牌的名称绑定-->
        <input type="text" name="brand_name" id="category_brand_up_brand_name" class="layui-input layui-hide">

        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="category_up_add" lay-filter="category_up_add">修改
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>


<!--品牌分类侧边栏显示信息-->
<script type="text/html" id="category_barDemo">
    <a class="layui-btn layui-btn-xs" id="category_band_up" lay-event="category_brand_edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="category_brand_del">删除</a>
</script>


<script>
    layui.extend({
        dtree: '../../static/layui_ext/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['dtree', 'form', 'table', 'layer', 'upload'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        let upload = layui.upload;
        let dtree = layui.dtree;


        //添加时的品牌图片上传信息
        var imgArray = "";//定义一个数组对象，用于存放上传后的图片地址，用户可能不是一次性上传所有图片
        //点击上传的时候，页面弹出一个提示框，避免用户重复点击
        $(".testListAction").click(function () {
            //配置一个透明的提示框
            layer.msg('正在上传中,请耐心等待,不要重复上传', {
                icon: 16,
                time: 3000, //3s后自动关闭
                offset: [100]
            });
        })

        //新增修改時进行的方法调用
        upload.render({
            elem: '.testList'
            , url: glodate.serverZuul + 'brand/filesUploadLayui'//我的上传接口
            , accept: 'images'//这里可以设置上传的类型限制
            , multiple: false  //是否允许多文件上传 默认false
            , auto: false  //是否自动上传 false需要设置下面的上传按钮
            , bindAction: '.testListAction'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    console.log(result);
                    //绑定图片的src路径显示图片
                    $('.brand_logo_imgs').attr('src', result); //图片链接（base64）
                    //只要点击上传图片 就删除图片格式的隐藏属性
                    $('.brand_logo_imgs').removeClass("layui-hide");
                });
            }
            //上传完成回调函数
            , done: function (res, index, upload) {
                console.log(res, index, upload);
                //新增获取图片返回的路径信息
                $("#brand_logo").val(res.data);
                //修改获取图片的信息
                $("#up_brand_logo").val(res.data);
                if (res.code == 0) { //上传成功
                    layer.msg("上传成功", {icon: 1});
                }
            }
            , error: function (index, upload) {
                layer.msg("上传失败", {icon: 2});
            }
        });


        //执行一个 table 实例显示品牌信息
        table.render({
            elem: '#demo'
            , url: glodate.serverZuul + 'brand/find_admin_Brand_All' //数据接口
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', style:'height:50px;',fixed: 'left'}
                , {type: 'numbers',style:'height:50px;', title: '序号'}
                , {field: 'name', title: '品牌名'}
                , {
                    field: 'imgUrl',
                    title: '展示图片',
                    style:'height:50px;',width : '6%',
                    templet: '#imgTpl'
                    // templet: '<div><img src="{{ d.logo }}" alt="" style="width:100%;height: 200px;" onclick="showBigImage(this)"></div>'
                }
                , {field: 'descript', title: '品牌介绍'}
                , {field: 'show_status', title: '显示状态', templet: '#switchTpl', unresize: true}
                , {field: 'first_letter', title: '品牌首字母'}
                , {fixed: 'right', align: 'center', toolbar: '#barDemo'}
            ]], id: 'tableID'
        });

        //模糊查询搜索
        $("#brand_souso").on('click', function () {
            active.reload();
            return false;
        });

        active = {
            reload: function () {
                table.reload('tableID', {
                    where: {
                        'name': $("#brand_name").val()
                    }, page: {
                        curr: 1
                    }
                })
            }
        }


        //品牌监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus("tableID");  //获取复选框的信息
            let data = checkStatus.data; //获取选中的数据

            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        skin: 'demo-class',
                        area: ['500px', '500px'],
                        anim: 5,
                        content: $('#brand_add_div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                    return false;
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        let brand_ids = [];
                        for (let i = 0; i < data.length; i++) {
                            brand_ids.push(data[i].brand_id);
                        }
                        let ids = brand_ids.join(",");
                        console.log(ids);
                        layer.confirm("确认删除【" + data.length + "】吗？", function () {
                            $.ajax({
                                url: glodate.serverZuul + "brand/delete_admin_All",
                                method: "delete",
                                data: {"brand_id": ids},
                                success: function (res) {
                                    console.log(res);
                                    if (res.code == 200) {
                                        layer.msg("删除成功！");
                                    } else {
                                        layer.alert(res.msg)
                                    }
                                    active.reload();
                                }
                            })
                        });
                    }
                    break;
            }
            ;
        });

        //添加品牌信息监听提交
        form.on('submit(brand_add)', function (data) {
            let url = glodate.serverZuul + "brand/insert_admin_All";
            let brandadd =form.val('brand_add_form');  //获取表单内的所有的值
            brandadd.logo = $("#brand_logo").val();    //获取图片上传的路径信息
            brandadd.show_status = brandadd.show_status != null ? 1 : 0;  //判断我们是否开启了图片的显示按钮

            console.log(brandadd);
            $.ajax({
                url:url,
                method:"post",
                dataType:"json",
                data: JSON.stringify(brandadd),
                contentType:"application/json",
                success:function (res) {
                    console.log(res);
                    console.log(res.data);
                    if (res.code == 200) {
                        layer.msg("添加成功！", {icon: 6});//2秒关闭（如果不配置，默认是3秒）
                        formIdreset('#brand_add_form');
                        $('.brand_logo_imgs').removeAttr('src'); //图片链接（base64）
                    } else {
                        let msgs;
                        // if(res.data.name != null){
                        //     msgs = res.data.name
                        // }else if(res.data.first_letter != null ){
                        //     msgs = res.data.first_letter;
                        // }else{
                        //     msgs = res.msg
                        // }
                        layer.msg(res.msg, {icon: 5});//2秒关闭（如果不配置，默认是3秒）
                    }
                    active.reload();  //重载页面表格
                }
            })
            return false;  //防止表单重复提交
        });

        //修改品牌信息
        form.on('submit(brand_up)', function () {
            let url = glodate.serverZuul + "brand/up_admin_All";
            let datas = form.val('brand_up_form');
            datas.logo = $("#up_brand_logo").val();    //获取图片上传的路径信息
            datas.show_status = datas.show_status != null ? 1 : 0;  //判断是否开启图片显示
            console.log(datas);
            $.ajax({
                url: glodate.serverZuul + "brand/up_admin_All",
                method: "put",
                data: JSON.stringify(datas),
                dataType: "json",
                contentType:"application/json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {
                            icon: 6
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 6
                        });
                    }
                }
            })
            active.reload();
            layer.close(index);
            return false;
        });

        //监听是否显示修改操作
        form.on('switch(switch_show_status)', function (obj) {
            let checked = obj.elem.checked;
            let show_status = checked == true ? 1 : 0;
            console.log(show_status);
            let data = {'show_status': show_status, 'brand_id': this.value}
            console.log(data)
            $.ajax({
                url: glodate.serverZuul + "brand/up_admin_status_All",
                type:"put",
                data: JSON.stringify(data),
                dataType: "json",
                contentType:"application/json;charset=utf-8",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.tips("修改成功", obj.othis, {time: 1000});
                    } else {
                        layer.msg(res.msg,obj.othis, {time: 1000});
                    }
                }
            })
            return false;
        });

        //监听侧边栏工具条  进行修改删除
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'brand_category') { //关联分类
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: "关联分类",
                    area: ['800px', '500px'],
                    anim: 5,
                    content: $('#brand_category_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //品牌分类维护的表格数据渲染
                table.render({
                    elem: '#brand_category_table'
                    , url: glodate.serverZuul + 'category_brand/find_admin_category_brand_All' //数据接口
                    , toolbar: '#category_brand_tool' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                    , where: {'brand_id': data.brand_id}
                    , page: true //开启分页
                    , cols: [[ //表头
                        {type: 'checkbox', fixed: 'left'}
                        , {type: 'numbers', title: '序号'}
                        , {field: 'brand_name', title: '品牌名'}
                        , {field: 'catelog_name', title: '分类名'}
                        , {fixed: 'right', align: 'center', toolbar: '#category_barDemo'}
                    ]], id: 'table_category_brand_ID'
                });

                //监听头工具栏事件
                table.on('toolbar(brand_category_table)', function (obj) {
                    let checkStatus = table.checkStatus("table_category_brand_ID");  //获取复选框的信息
                    let datas = checkStatus.data; //获取选中的数据

                    switch (obj.event) {
                        case 'category_brand_add':
                            //绑定新增的按钮进行品牌分类的维护
                            $("#category_brand_add_brand_id").attr("value", data.brand_id);
                            $("#category_brand_add_brand_name").attr("value", data.name);
                            layer.open({
                                type: 1,
                                skin: 'demo-class',
                                title: '新增',
                                area: ['400px', '400px'],
                                anim: 5,
                                content: $('#category_brand_add_div'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                                btn: ['关闭'],
                                yes: function (index, layero) {
                                    layer.close(index);
                                }
                            });

                            //重新加载树的渲染方法
                            dtree.reload("add_selTree1",{
                                url: glodate.serverZuul + 'category/getTree',
                            });
                            return false;
                            break;
                        case 'category_brand_delete':
                            if (datas.length === 0) {
                                layer.msg('请先选择一行', {
                                    icon: 2
                                });
                            } else {
                                let category_brand_ids = [];//存储复选框信息
                                for (let i = 0; i < datas.length; i++) {
                                    category_brand_ids.push(datas[i].id);
                                }
                                let ids = category_brand_ids.join(",");
                                console.log(ids);
                                layer.confirm("确认删除这【" + datas.length + "】条数据吗？", function () {
                                    $.ajax({
                                        url: glodate.serverZuul + "category_brand/delete_admin_category_brand_All",
                                        method: "delete",
                                        data: {"id": ids},
                                        success: function (res) {
                                            console.log(res);
                                            if (res.code == 200) {
                                                layer.msg("删除成功！", {icon: 6});
                                            } else {
                                                layer.alert(res.msg, {icon: 5});
                                            }
                                            actives.reload();
                                        }
                                    })
                                });
                            }
                            break;
                    }
                    ;
                });

                //查询品牌分类维护信息
                $("#category_brand_souso").on('click', function () {
                    actives.reload();
                    return false;
                })
                actives = {
                    reload: function () {
                        table.reload('table_category_brand_ID', {
                            where: {
                                'brand_name': $("#category_brand_name").val()
                            }, page: {
                                curr: 1
                            }
                        })
                    }
                }


                //新增品牌分类的信息
                form.on('submit(category_brand_add)', function () {
                    let formTest = $('#category_brand_add_form').serialize();
                    console.log(formTest);
                    $.ajax({
                        url: glodate.serverZuul + "category_brand/insert_admin_category_brand_All",
                        data: formTest,
                        method: "post",
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg("添加成功", {
                                    icon: 6
                                });
                            } else {
                                layer.msg(res.msg, {
                                    icon: 5
                                });
                            }
                        }
                    });
                    actives.reload();
                    return false;
                })
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除【' + data.name + '】吗?', function (index) {
                    $.ajax({
                        url: glodate.serverZuul + "brand/delete_admin_All",
                        method: "delete",
                        data: {"brand_id": data.brand_id},
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg("删除成功！", {
                                    icon: 6
                                });
                            } else {
                                layer.alert(res.msg, {
                                    icon: 5
                                });
                            }
                            active.reload();
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                form.val('brand_up_form', data);
                $('#up_brand_logo_imgs').attr('src', data.logo); //图片链接（base64）
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: '修改',
                    area: ['500px', '500px'],
                    anim: 5,
                    content: $('#brand_up_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                return false;
            }
        });

        let index_up;
        //监听分类品牌的维护侧边工具栏
        table.on('tool(brand_category_table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'category_brand_edit') { //关联分类
                form.val('category_brand_up_form', data);
                $("#up_selTree1").attr("data-value", data.catelog_id);
                console.log(form.val('category_brand_up_form', data));
                index_up = layer.open({
                    type: 1,
                    skin: 'demo-class',
                    title: '修改',
                    area: ['400px', '400px'],
                    anim: 5,
                    content: $('#category_brand_up_div') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //重新加载树的渲染方法
                dtree.reload("up_selTree1",{
                    url: glodate.serverZuul + 'category/getTree',
                    selectInitVal: data.catelog_id
                });
                return false;
            } else if (layEvent === 'category_brand_del') {
                layer.confirm("确认要删除该数据", {}, function () {
                    $.ajax({
                        url: glodate.serverZuul + "category_brand/delete_admin_category_brand_All",
                        method: "delete",
                        data: {"id": data.id},
                        dataType: "json",
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                            actives.reload();
                        }
                    })
                })
            }
        });

        //分类品牌的修改
        form.on('submit(category_up_add)', function () {
            console.log(form.val('category_brand_up_form'));
            $.ajax({
                url: glodate.serverZuul + "category_brand/up_admin_category_brand_All",
                method: "put",
                data: form.val('category_brand_up_form'),
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("修改成功", {
                            icon: 6
                        })
                    } else {
                        layer.msg(res.msg, {
                            icon: 5
                        })
                    }
                    // 重置清空
                    actives.reload();
                    layer.close(index_up);//它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
                }
            })
            return false;
        })

        //点击图片放大
        window.showBigImage = function (e) {
            //此处放置函数内容
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: [$(e).width + 'px', $(e).height + 'px'], //宽高
                content: "<img src=" + $(e).attr('src') + " />"
            });
        }













        //分类品牌新增的树结构显示
        dtree.renderSelect({
            elem: "#add_selTree1",
            width: "100%", // 指定树的宽度
            method: "get",
            selectTips: "单选数据示例",
            menubar: true, //开启菜单栏
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义
            url: glodate.serverZuul + 'category/getTree', // 使用url加载（可与data加载同时存在）
            selectTips: "请选择",
            selectInputName: {  //指定下拉树获取的表单名称
                nodeId: "nodeId",
                context: "context"
            }
        });

        //分类品牌新增的点击的获取
        dtree.on('node("add_selTree1")', function (obj) {
            var param = dtree.selectVal("add_selTree1");
            $("#add_tree").val(param["nodeId"]);
            $("#category_brand_add_cotelog_name").val(param["context"])
            console.log(param["nodeId"]);
            console.log(param["context"]);
            layer.msg(JSON.stringify(param));
        });


        //分类品牌修改的树结构显示
        dtree.renderSelect({
            elem: "#up_selTree1",
            width: "100%", // 指定树的宽度
            method: "get",
            selectTips: "单选数据示例",
            menubar: true, //开启菜单栏
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            response: {message: "msg", statusCode: 0}, //修改response中返回数据的定义
            url: glodate.serverZuul + 'category/getTree', // 使用url加载（可与data加载同时存在）
            selectTips: "请选择",
            selectInputName: {  //指定下拉树获取的表单名称
                nodeId: "nodeId",
                context: "context"
            },
        });

        //分类品牌新增的点击的获取
        dtree.on('node("up_selTree1")', function (obj) {
            let param = dtree.selectVal("up_selTree1");
            $("#category_brand_up_cotelog_id").val(param["nodeId"]);
            $("#category_brand_up_cotelog_name").val(param["context"])
            console.log(param["nodeId"]);
            console.log(param["context"]);
            console.log(JSON.stringify(param));
        });





        //提取的清楚表單的方法  formId form表头的id值
        function formIdreset(formId) {
            // 重置清空
            $(formId)[0].reset();
            form.render();//必须写
        }

    });
</script>


</body>
</html>